<script lang="ts" setup>

  import type { PerFamilyStockApi } from '#/api/per/familyStock';
    import { useVbenModal } from '@vben/common-ui';

  import { ref } from 'vue';
  import { useDescription } from '#/components/description';
  import { getFamilyStock } from '#/api/per/familyStock';
  import { useDetailSchema } from '../data';

  const formData = ref<PerFamilyStockApi.FamilyStock>();

  const [Descriptions] = useDescription({
    bordered: true,
    size: 'middle',
    column: 2,
    labelWidth: 120,

    schema: useDetailSchema(),
  });


    const [Modal, modalApi] = useVbenModal({
      async onOpenChange(isOpen: boolean) {
        if (!isOpen) {
          formData.value = undefined;
          return;
        }
        let data = modalApi.getData<PerFamilyStockApi.FamilyStock>();
        if (!data || !data.id) {
          return;
        }
        modalApi.lock();
        try {
          data = await getFamilyStock(data.id);
          formData.value = data;
        } finally {
          modalApi.unlock();
        }
      },
    });
</script>

<template>
    <Modal title="查看 股票情况" class="w-[80%]" :show-cancel-button="false" :show-confirm-button="false">
      <Descriptions :data="formData" class="mx-4" />
    </Modal>
</template>